Thank you for purchasing beCharity Template. beCharity is a fully responsive retina ready HTML5 charity template. It is based on bootstrap 3.3.5.
beCharity is fully responsive HTML5 Template followed HTML5 Structure. List of HTML file:
Head Section Structure: Here is the example code of section
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>beCharity HTML5 responsive charity theme</title>
<!--Fav and touch icons-->
<link rel="icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="76x76" href="images/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="120x120" href="images/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="152x152" href="images/apple-touch-icon-152x152.png">
<!--Common Styles Plugins-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link rel="stylesheet" type="text/css" href="css/magnific-popup.css">
<link rel="stylesheet" type="text/css" href="css/owl.carousel.css">
<link rel="stylesheet" type="text/css" href="css/owl.theme.default.min.css">
<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css">
<!--Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900" rel="stylesheet">
<!--Custom Style-->
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="space.css">
<link rel="stylesheet" type="text/css" href="responsive.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
You can easily edit the html file section by section. Remove dummy content, use your own content and you website will be ready for production.
We are using latest CSS coding standard. Custom Style written into style.css which is override Bootstrap style and Responsive style written into responsive.css.
CSS Files included:
style.css file contains all of the specific styling for the template. Here is an example of general style which is specify using following label:
/* Theme Name: beCharity Template Description: HTML5 Charity Template Version: 1.0.0 */ /* ================================================================== * Table of Contents: * * 1.0 - General styles * 2.0 - Common styles * 3.0 - Header Styles * 4.0 - Home Slider * 5.0 - Fun fact Section * 6.0 - Equal Column Height Style * 7.0 - Home Gallery Section * 8.0 - Clients Section * 9.0 - Call to Action Section * 10.0 - Client Testimonial Section * 11.0 - Newsletter Signup * 12.0 - Page Title Section * 13.0 - Breadcrumb Section * 14.0 - Page Accordian * 15.0 - Page Navigation * 16.0 - About Page * 17.0 - Cause Details * 18.0 - Event Page * 19.0 - Event Details * 20.0 - Team Page * 21.0 - Partner Page * 22.0 - FAQ Page * 23.0 - Gallery Page * 24.0 - Contact Page * 25.0 - Register Page * 26.0 - 404 Page * 27.0 - Home Feature Blog * 28.0 - Blog Page * 29.0 - Single Blog * 30.0 - Blog Comment * 31.0 - Widget Section * 32.0 - Archive Page * 33.0 - Shop Page * 34.0 - Cart Page * 35.0 - Empty Cart Page * 36.0 - Checkout Page * 37.0 - Donation Page * 38.0 - Footer Section * 39.0 - Scroll To Top * 40.0 - Preloader ================================================================== */
If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.
If you want to change the Newsletter style, find the following section in the style sheet and change it:
/* ==================================================================
11.0 Newsletter Signup
================================================================== */
.newsletter-section {
background: #2867de;
padding: 50px 0;
}
.newsletter-section .title {
color: #fff;
margin: 0;
}
.newsletter-section p {
color: #ffffff;
margin: 0;
opacity: 0.8;
} m
.newsletter-form {
margin-top: 10px;
}
.newsletter-form .form-group {
margin-bottom: 0;
}
.newsletter-section .newsletter-form .form-control {
border: 0;
border-radius: 0;
box-shadow: none;
height: 32px;
}
.newsletter-section .newsletter-form .search-button {
padding: 0;
border: 0;
background: transparent;
padding-left: 30px;
}
.newsletter-section .search-button .btn {
padding: 9px 40px;
}
.newsletter-section .search-button .btn:hover {
background: #fff;
color: #ff3450;
}
You can declaer your custom code on the bottom of style.css file
There are many predefined classes for different style like color, background, borders, button, padding/margin. Here is the list of those classes:
| Class | Description |
red |
Sets your element's color to #ff3450, theme's default red color |
btn |
Sets your button style with predefined theme's button. |
btn-red |
Set button with #ff3450 color |
btn-donate |
Different style of button for Donate |
pd-top-[x] |
Add padding to top in your element. Replace X with your required padding. The theme default top padding are 10,15,20,25,30,40,50,60,65,80,100 If you need 100px padding from top simply use this class pd-top-100 |
pd-bottom-[x] |
Add padding to bottom in your element. Replace X with your required padding. The theme default bottom padding are 10,15,20,25,30,40,50,60,65,80,100 If you need 100px padding from bottom simply use this class pd-bottom-100 |
mg-top-[x] |
Add margin to top in your element. Replace X with your required margin. The theme default top margin are 10,15,20,25,30,40,50,60,65,80,100 If you need 100px margin from top simply use this class mg-top-100 |
mg-bottom-[x] |
Add margin to bottom in your element. Replace X with your required margin. The theme default bottom margin are 10,15,20,25,30,40,50,60,65,80,100 If you need 100px margin from top simply use this class mg-bottom-100 |
left |
Sets left float in your element |
right |
Sets right float in your element |
Please check element.html page for more predefined classes example
For Retina Image please add "retina" class within your img tag and name your retina image as @2x. So if your image name is logo.png, rewrite your retina logo image as logo@2x.png and add "retina" class like that:
<img class="retina" src="images/logo.png">
All Javascript files are loaded in the end of the page.
<!--Common JS Plugin--> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript" src="js/jquery-ui.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script type="text/javascript" src="js/retina.min.js"></script> <script type="text/javascript" src="js/jquery.easing.min.js"></script> <script type="text/javascript" src="js/jquery.scrollUp.min.js"></script> <script type="text/javascript" src="js/owl.carousel.min.js"></script> <script type="text/javascript" src="js/isotope.pkgd.min.js"></script> <script type="text/javascript" src="js/imagesloaded.pkgd.min.js"></script> <script type="text/javascript" src="js/headroom.min.js"></script> <script type="text/javascript" src="js/jQuery.headroom.min.js"></script> <script type="text/javascript" src="js/sticky-kit.min.js"></script> <script type="text/javascript" src="js/jquery.countdown.min.js"></script> <script type="text/javascript" src="js/jquery.waypoints.js"></script> <script type="text/javascript" src="js/jquery.magnific-popup.min.js"></script> <script type="text/javascript" src="js/jquery.counterup.min.js"></script> <!-- Google Map --> <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script> <!-- Custom JS --> <script type="text/javascript" src="js/custom.js"></script>
beCharity is using those Javescript library:
For editing Google Map, you have to cretae a API Key on Google Map. Go to here and click "GET A KEY" .Make a new project or select an existing project and create your api key. Now copy and paste your api key on html pages footer
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
Pleace your API key on YOUR_API_KEY
Now go to custom.js and edit the map section with your location
/* -------------------------------------------------------------
Google Map
------------------------------------------------------------- */
var map;
window.initMap = function() {
if ( $('#map').length){
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
}
PHP File included:
Mail Configuration:
In contact.php, find the following line and change your email with it.
$email_to = "demo@gmail.com"; //Your email will be placed here
CSS and JavaScript Credits
Image Link and Credit
https://www.flickr.com/photos/twestival/3233466456/Once again, thank you so much for purchasing this template. Please contact with us for any kind of question about beCharity.